import MinemapGlobe from '../../src/index';
const geoCoordMap = require('./airportGPS');

const radius = 2;
const globe = new MinemapGlobe({
    container: 'globe',
    maskUrl: 'dist/static/images/base.png',
    backgroundUrl: 'dist/static/images/starBackground.jpg',
    mapTileService: 'tecent'
});

const option = {
    id: 'dynamic',
    type: 'dynamic-line',
    color: [226, 21, 159],
    lineWidth: 6,
    opacity: 0.9,
    sizeAttenuation: 0.0,
    segmentCount: 2050.0,
    segmentGroup: 50.0,
    speed: 0.021,
    path: []
};

const hotAirport = ["PEK", "PVG", "SZX", "HKG", "GMP", "ICN", "TSA", "TPE", "NRT", "HND", "SIN", "MFM", "BKK", "KIX", "ITM", "SGN", "MNL", "NGO", "LGW", "LHR", "KUL", "PUS", "SYD", "FRA", "YVR", "ORY", "CDG", "JFK", "LGA", "LAX", "VKO", "SVO", "DME"];
const hotAirportForLabel = ["PEK", "PVG", "SZX", "GMP", "TPE", "NRT", "SIN", "BKK", "ITM", "SGN", "MNL", "LHR", "KUL", "PUS", "SYD", "FRA", "YVR", "ORY", "JFK", "LAX", "DME"];

const positions = [];

fetch('dist/static/all.json')
    .then(response => response.json())
    .then((data) => {
        const airlineData = data.data;
        airlineData.forEach((element, index) => {
            if (index % 4 !== 0) return;
            // if (element[2] === 0) return;
            const startIndex = hotAirport.indexOf(element[0]);
            const endIndex = hotAirport.indexOf(element[1]);
            if (startIndex !== -1 || endIndex !== -1) {
                if (!geoCoordMap[element[0]] || !geoCoordMap[element[1]]) return;
                const count = parseInt(Math.random() * 2000);
                const colorNum = startIndex !== -1 ? startIndex * 7 : endIndex * 7;
                const path = [geoCoordMap[element[0]].slice(0, 2), geoCoordMap[element[1]].slice(0, 2), 50, 0.3, count, option.color, option.opacity, option.lineWidth];
                option.path.push(path);                
                // if (startIndex !== -1 && endIndex !== -1) {
                    positions.push({
                        lngLat: path[0],
                        size: [16, 16],
                        offset: [0, 0],
                        type: 'image',
                        content: 'dist/static/images/airport.png',
                        movePath: path.slice(0, 5)
                    });
                // }
            }
        });
        globe.addLayer(option);
        globe.addLayer({
            id: 'labelImgLayer',
            type: 'dynamicLabel',
            sizeAttenuation: 0.0,
            segmentCount: 2050,
            speed: 0.021,
            positions: positions
        });
    });

const optionLabel = {
    id: 'labelImgLayer',
    type: 'label',
    sizeAttenuation: 0.0,
    // 经纬度，宽高（像素），偏移（像素），纹理类型，图片路径/文字内容
    positions: []
};

hotAirportForLabel.forEach((element) => {
    optionLabel.positions.push({
        id: element,
        lngLat: geoCoordMap[element].slice(0, 2),
        size: [16, 16],
        offset: [0, 0],
        type: 'image',
        content: 'dist/static/images/point-orange.png'
    });
    optionLabel.positions.push({
        id: element,
        lngLat: geoCoordMap[element].slice(0, 2),
        offset: [0, 16],
        type: 'text',
        content: element,
        fontSize: 16
    });
});
globe.addLayer(optionLabel);

function fly() {
    globe.fly({
        lng: 116,
        lat: 25,
        zoom: 3
    }, {
            lng: -244,
            lat: 25,
            zoom: 3
        }, 30000, 'liner', () => {
            fly();
        });
}

// setTimeout(() => {
//     fly()
// }, 3000);

// 添加地图交互
const lngLatDom = document.getElementById('lngLat');
const airportDom = document.getElementById('airport');
globe.canvas.addEventListener('mousemove', (e) => {
    const event = e ? e : window.event;
    if (event.preventDefault) event.preventDefault();  //标准 
    if (event.returnValue) event.returnValue = false;  //IE 
    if (event.stopPropagation) event.stopPropagation();
    if (event.cancelBubble) event.cancelBubble = true;
    const x = event.clientX;
    const y = event.clientY;
    const lngLat = globe.scene.getPickUpPosition(x, y).lngLat;
    const points = globe.scene.queryReactableGeometries(x, y, 'labelImgLayer');
    if (lngLat.length) {
        lngLatDom.innerHTML = lngLat[0] + ',<br />' + lngLat[1];
    }
    else {
        lngLatDom.innerHTML = '无'
    }
    if (points.length) {
        airportDom.innerHTML = points[0];
    }
    else {
        airportDom.innerHTML = '无'
    }
});
